<template>
  <!-- 存管结算账户资料 -->
  <div>
    <div class="bt_box">
      <p class="btText">存管结算账户资料</p>
      
    </div>
    <div class="information">
      <div class="list">
        <div class="lable">结算方式:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.settleBankTypeDict }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.settleBankType" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算费率:</div>
        <div class="text" v-if="!depositShow">{{ settleDepositInfo.fee }}</div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.fee" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算银行卡号:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.balanceAccCardno }}
        </div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.balanceAccCardno" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="list">
        <div class="lable">开户行名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.bankName }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.bankType" filterable placeholder="请选择" @change="changes">
            <el-option v-for="item in bankOptionone" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">所属支行名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.openAccBankname }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.openAccBanktype" placeholder="请选择" filterable @change="changesTwo">
            <el-option v-for="item in bankOptiontwo" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">银行预留手机号:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.bankMobile }}
        </div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.bankMobile" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算类型:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.clearingTypeDict }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.clearingType" placeholder="请选择">
            <el-option v-for="item in options3" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算账户名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.balanceAccName }}
        </div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.balanceAccName" placeholder="请输入"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  //api
  import {
    adminDict,
    settleDeposit,
    getBank,
    updateSettle,
  } from "@/api/merchants";
  export default {
    components: {},
    props: {
      id: String,
      status: String,
      pathType: String,
    },
    data() {
      return {
        buttonLoding: false,
        depositShow: false,
        options2: [], //结算方式
        options3: [], //结算类型
        bankOptionone: [], //银行
        bankOptiontwo: [], //支行
        settleDepositInfo: {}, //存管结算账户资料
        depositFrom: {
          //存管结算账户资料提交
          id: "",
          merchantId: "", //商家id
          settleBankType: "", //结算方式
          clearingType: "", //结算类型
          fee: "", //费率
          balanceAccCardno: "", //结算银行卡号
          bankName: "", //开户行名称
          bankType: "", //开户行code
          openAccBanktype: "", //所属支行code
          openAccBankname: "", //所属支行名称
          bankMobile: "", //银行预留电话
          balanceAccName:'',//结算账户名称
        },
      };
    },
    computed: {},
    created() {
      console.log('id111111111111',this.id)
      this.getbankType();
      this.getclearingType();
      this.getBank();
      this.getsettleDeposit();
    },
    methods: {
      getbankType() {
        //获取结算方式字典
        const params = {
          dictType: "manage_settle_bank_type",
        };
        adminDict(params).then((res) => {
          this.options2 = res.result[0].dictList;
          this.options2.splice(2, 2);
        });
      },
      getclearingType() {
        //获取结算类型字典
        const params = {
          dictType: "merchant_clearing_type",
        };
        adminDict(params).then((res) => {
          this.options3 = res.result[0].dictList;
        });
      },
      getsettleDeposit() {
        //查询银盛进件商户存管结算账户信息
        const merchantId = this.id;
        settleDeposit(merchantId)
          .then((res) => {
            this.settleDepositInfo = res.result;
            this.depositFrom.id = res.result.id;
            this.depositFrom.merchantId = this.id;
            this.depositFrom.settleBankType = res.result.settleBankType;
            this.depositFrom.clearingType = res.result.clearingType;
            this.depositFrom.fee = res.result.fee;
            this.depositFrom.balanceAccCardno = res.result.balanceAccCardno;
            this.depositFrom.bankMobile = res.result.bankMobile;
            this.depositFrom.openAccBanktype = res.result.openAccBanktype;
            this.depositFrom.bankType = res.result.bankType;
            this.depositFrom.bankName = res.result.bankName;
            this.depositFrom.openAccBankname = res.result.openAccBankname;
            this.depositFrom.balanceAccName = res.result.balanceAccName
            this.$emit("getdepositFromId", res.result.id);
            this.getBank();
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getBank() {
        //获取银行信息
        const params = {};
        getBank(params).then((res) => {
          // console.log(res.result);
          this.bankOptionone = res.result;
          if (this.depositFrom.bankType != "") {
            this.bankOptionone.map((item, index) => {
              if (this.depositFrom.bankType == item.id) {
                this.bankOptiontwo = item.children;
              }
            });
          }
          // console.log(this.bankOptiontwo);
        });
      },
      depositMide() {
        this.depositShow = true;
      },
      changes(value) {
        //银行
        console.log(value);
        this.bankOptionone.map((item, index) => {
          if (value == item.id) {
            this.bankOptiontwo = item.children;
            this.depositFrom.bankType = item.id;
            this.depositFrom.bankName = item.label;
          }
        });
        this.depositFrom.openAccBanktype = "";
      },
      changesTwo(id) {
        //支行选择
        this.bankOptiontwo.map((item, index) => {
          if (id == item.id) {
            this.depositFrom.openAccBanktype = item.id;
            this.depositFrom.openAccBankname = item.label;
          }
        });
      },
      settlementSumit() {
        this.buttonLoding = true;
        var params = {
          ...this.depositFrom,
        };
        updateSettle(params)
          .then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
            });
            this.getsettleDeposit();
            setTimeout(() => {
              this.buttonLoding = false;
              this.depositShow = false;
            }, 800);
          })
          .finally(() => {
            this.buttonLoding = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "../../../style/incomingDetail";

</style>
